<template>
 <div>
    <div style="margin-top:10px;">
     <el-table
    :data="resources"
    :height="tableHeight"
    stripe
    style="width: 100%">
    <el-table-column
      prop="title"
      label="博客题目"
      width="150">
    </el-table-column>
    <el-table-column
      prop="authorName"
      label="博客作者"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      :formatter="dateFormat"
      label="创作时间">
    </el-table-column>

     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleView(scope.row.id)">查看</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">取消收藏</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div style="text-align:center;padding:10px;">
                  <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total">`
                </el-pagination>
  </div>
 </div>
</template>

<script>
 export default {
   name: 'UserFollow',
   data () {
     return {
        resources: [],
        pageSize: 6,
        total: 0,
        keywords: '',
     }
   },
   props: [],
   components: {

   },
   created () {},
   mounted () {this.loadResources()},
   computed: {
      tableHeight () {
        return 364
      }
    },
   methods: {
            loadResources () {
                var _this = this
                this.$axios.get('/blog/favorite/' + this.pageSize + '/1').then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.resources = resp.data.data.records
                    _this.total = resp.data.data.totalCount
                  }
                })
              },
              handleCurrentChange (page) {
                var _this = this
                this.$axios.get('/blog/favorite/' + this.pageSize + '/' + page).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.resources = resp.data.data.records
                    _this.total = resp.data.data.totalCount
                  }
                })
              },
              dateFormat(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data ==='') {
                    return ''
                }else {
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                }
              },
              handleView(id) {
                let articleUrl = this.$router.resolve(
                  {
                    path: '../../blog/Details',
                    query: {
                      id: id
                    }
                  }
                )
                window.open(articleUrl.href, '_blank')
              },
              handleDelete(id) {
                this.$confirm('你是否不再官族这篇文章, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    this.$axios
                      .delete('/blog/delete/' + id).then(resp => {
                      if (resp && resp.data.code === 200) {
                        this.loadResources ()
                      }
                    })
                  }
                ).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                })
              },
   }
 }
</script>

<style lang="css" scoped>

</style>
